<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>物理运动</title>
</head>
	<style type="text/css">
		.canvas {
			margin: 50px auto;
			border: 1px solid #393939;
			display: block;
		}
	
	</style>
<body>
<canvas class="canvas" id="canvas">
		当前浏览器不支持Canvas，请更换浏览器再试。
	</canvas>
</body>
<script type="text/javascript">
var ball = { x : 512,y:100,r:20,g:2,vx:-4,vy:0,color:"#005588"}

window.onload = function(){
	
	var canvas = document.getElementById("canvas");
	canvas.width = 800;
	canvas.height = 800;
	var context = canvas.getContext("2d");

	setInterval(
		function(){
			render(context);
			update();	
		},
	50);
}

function render(context){
	context.clearRect(0,0,context.canvas.width,context.canvas.height);
	context.fillStyle = ball.color;
	context.beginPath();
	context.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
	context.closePath();
	context.fill();
};
function update(){
	ball.x += ball.vx;
	ball.y += ball.vy;
	ball.vy += ball.g;
};
</script>
</html>
